import { userStore } from '@/store/modules/user'
import { getToken } from '@/utils/helper/cookieHelper'
import { defineComponent, reactive } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'Login',
  setup () {
    const router = useRouter()
    const loginFormData = reactive({
      model: {
        username: 'admin',
        password: '123'
      }
    })
    const loginFormSubmit = async () => {
      await userStore.login(loginFormData.model)
      if (getToken()) {
        router.push('/')
      }
    }
    return () => {
      const model = loginFormData.model
      const cardSlots = {
        title: () => (
          <div class="text-center font-bold text-primary">SPS Vite Simple</div>
        ),
        default: () => (
          <a-form model={ model } wrapperCol={{ span: 24 }}>
            <a-form-item>
              <a-input v-model={ [model.username, 'value', []] } v-slots={{
                prefix: () => (<i class="fas fa-user"></i>)
              }} />
            </a-form-item>
            <a-form-item>
              <a-input-password v-model={ [model.password, 'value', []] } v-slots={{
                prefix: () => (<i class="fas fa-lock"></i>)
              }} />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" block onClick={ loginFormSubmit }><i class="fas fa-sign-in-alt"></i>登录</a-button>
            </a-form-item>
          </a-form>
        )
      }
      return (
        <div class="flex-center h-screen">
          <a-card class="w-80" v-slots={ cardSlots }></a-card>
        </div>
      )
    }
  }
})
